<template>
  <div class="number-ball-box">
    <div class="audio-box" v-show="false">
      <audio
        ref="audioLotteryPlayer"
        src="@/assets/music/lottery.mp3"
        loop
      ></audio>
      <audio ref="audioVotePlayer" src="@/assets/music/vote.mp3" loop></audio>
    </div>
    <div class="main-box">
      <div class="lottery-btn flex-center-end">
        <div class="btn" @click="onPageType(2)">抽奖</div>
        <div class="vote" @click="onPageType(5)">投票</div>
      </div>
    </div>
    <div class="lottery-box" :class="{ active: pageType !== 1 }">
      <div class="bg-video">
        <ThreeSphere
          :winnerList="winnerList"
          v-show="pageType > 1 && pageType < 5"
        ></ThreeSphere>
        <video
          src="@/assets/number-ball-image/bg.mp4"
          style="object-fit: fill"
          autoplay="autoplay"
          autobuffer=""
          autoloop=""
          loop=""
          muted
          width="100%"
          height="100%"
        ></video>
      </div>
      <div v-show="pageType > 1 && pageType < 5">
        <div class="lotterying flex-center-center" v-show="beginLoading !== 0">
          <div class="ele-list flex-center-between">
            <div class="ele-bg">
              <div class="ele-bg-border"></div>
              <img
                class="ele-bg-top-left"
                src="@/assets\number-ball-image/lotterylistang11.png"
                alt=""
              />
              <img
                class="ele-bg-top-right"
                src="@/assets\number-ball-image/lotterylistang11.png"
                alt=""
              />
              <img
                class="ele-bg-bottom-left"
                src="@/assets\number-ball-image/lotterylistang11.png"
                alt=""
              />
              <img
                class="ele-bg-bottom-right"
                src="@/assets\number-ball-image/lotterylistang11.png"
                alt=""
              />
            </div>
            <div
              class="ele-item flex-center-center"
              v-for="(item, index) in lotteryingList"
              :key="index"
            >
              <img src="@/assets\number-ball-image/usercircle4.png" alt="" />
              <div class="value font-style">{{ item.value }}</div>
            </div>
          </div>
        </div>
        <div class="bottom-btn-box flex-center-between" v-show="pageType !== 4">
          <div class="left flex-center">
            <div class="pick" v-show="beginLoading !== 1">
              一次抽取
              <div class="pick-box flex-center">
                <i
                  class="el-icon-minus points"
                  :class="{ disabled: num === 1 }"
                  @click="chooseNum('-')"
                ></i>
                <div class="num">{{ num }}</div>
                <i
                  class="el-icon-plus points"
                  :class="{ disabled: num === 5 }"
                  @click="chooseNum('+')"
                ></i>
              </div>
              个
            </div>
          </div>
          <div class="center-btn">
            <div class="btn main" @click="onStart">
              {{ beginLoading === 1 ? "停止" : "开始" }}
            </div>
          </div>
          <div class="right flex-center-end" v-show="beginLoading !== 1">
            <div @click="onPageType(4)" class="points">
              已中奖名单（{{ winnerList.length }}）
            </div>
            <div
              class="back points"
              v-show="beginLoading !== 1"
              @click="onPageType(1)"
            >
              返回
            </div>
          </div>
        </div>
        <!-- 中奖名单 -->
        <div class="win-list mask flex-column-center" v-show="pageType == 4">
          <div class="title">中奖名单</div>
          <div class="win-list-tips">
            {{ minNumber }}-{{ maxNumber }}共{{
              maxNumber - minNumber + 1
            }}个号码，已中{{ winnerList.length }}个，剩余{{
              maxNumber - winnerList.length
            }}个
          </div>
          <div class="user-list">
            <div class="el-icon-sort" @click="winnerSort"></div>
            <div class="scroll flex-center">
              <div
                class="value"
                v-for="(item, index) in sortWinnerList"
                :key="index"
              >
                {{ item }}
              </div>
            </div>
          </div>
          <div class="btn main back" @click="pageType = 2">返回</div>
        </div>
      </div>
      <div class="" v-show="pageType === 5">
        <statistic
          ref="statisticRefs"
          :sessionCode="sessionCode"
          @close="onPageType(1)"
        ></statistic>
      </div>
    </div>
  </div>
</template>
<script>
import { throtte, debounces } from "@/utils";
import { getWinnerList, postWinner } from "@/api/number-ball";
import ThreeSphere from "./components/ThreeSphere/index.vue";
import statistic from "./statistic.vue";
export default {
  components: { ThreeSphere, statistic },
  data() {
    return {
      sessionCode: this.$dayjs().format("YYYYMMDD"),
      minNumber: 1,
      maxNumber: 200,
      pageType: 1, //1-壁纸页面，2-准备抽奖页面，4-中奖结果，5投票结果
      num: 5,
      lotteryingList: [], //抽奖显示的列表
      attendList: [], //参与列表
      winnerList: [], //中奖名单
      sortWinnerList: [], //排序后的中奖名单
      beginLoading: 0, //0-未开始，1已开始,2中奖结果
      beginLoadingTime: null,
      musicSrc: "", // 替换为你的音乐文件路径
    };
  },
  created() {
    this.computedLotteryNumber();
    const query = this.$route.query;
    if (query.code) {
      this.sessionCode = query.code;
    }
    query.max && (this.maxNumber = query.max * 1);
    query.min && (this.minNumber = query.min * 1);
    this.getData();
    this.keydowns();
  },
  methods: {
    getData() {
      getWinnerList({
        code: this.sessionCode,
      })
        .then((res) => {
          if (res.data && res.code === 200) {
            const data = res.data;
            if (data.luckyNumber) {
              let winnerList = data.luckyNumber.split(",");
              this.winnerList = winnerList.map((item) => item * 1);
            }
            this.minNumber = data.minNumber;
            this.maxNumber = data.maxNumber;
          }
          this.setAttendList();
        })
        .catch(() => {
          this.setAttendList();
        });
    },
    // 设置参与列表
    setAttendList() {
      let attendList = [];
      const { minNumber, maxNumber, winnerList } = this;
      for (let i = minNumber; i < maxNumber + 1; i += 1) {
        attendList.push(i);
      }
      if (winnerList.length) {
        winnerList.map((item) => {
          attendList = attendList.filter((son) => {
            if (son != item) {
              return true;
            }
          });
        });
      }
      this.attendList = attendList;
    },
    addData(luckyNumber) {
      postWinner({
        level: "3",
        code: this.sessionCode,
        luckyNumber: luckyNumber.join(","),
        minNumber: this.minNumber,
        maxNumber: this.maxNumber,
      }).then((res) => {
        if (res.code === 200) {
          this.winnerList.push(...luckyNumber);
        }
      });
    },
    onStart() {
      throtte(() => {
        const { attendList, lotteryingList } = this;
        if (attendList.length < this.num) {
          this.$message({
            message: "剩余号码不足",
            type: "error",
            duration: 5 * 1000,
          });
          return;
        }
        if (this.beginLoading === 1) {
          this.beginLoadingTime && clearInterval(this.beginLoadingTime);
          this.beginLoading = 2;
          let winnerNumber = [];
          lotteryingList.map((item) => {
            const index = this.random(this.attendList.length) - 1;
            const result = this.attendList.splice(index, 1)[0];
            item.value = result + "";
            winnerNumber.push(result);
            // console.log("中奖号码：" + result);
            // console.log("剩余号码：" + this.attendList);
            // console.log("剩余号码数量：" + this.attendList.length);
          });
          this.addData(winnerNumber);
        } else {
          this.beginLoadingTime && clearInterval(this.beginLoadingTime);
          this.beginLoadingTime = setInterval(() => {
            lotteryingList.map((item) => {
              const index = this.random(attendList.length);
              item.value = attendList[index - 1] + "";
            });
          }, 100);
          this.beginLoading = 1;
        }
      }, 1000);
    },

    chooseNum(type) {
      if (type === "+" && this.num < 5) {
        this.num++;
      } else if (type === "-" && this.num > 1) {
        this.num--;
      }
      this.computedLotteryNumber();
    },
    computedLotteryNumber() {
      this.lotteryingList = [];
      for (let i = 0; i < this.num; i += 1) {
        this.lotteryingList.push({ value: "00" });
      }
      this.beginLoading = 0;
    },
    onPageType(type) {
      if (type === 4) {
        this.sortWinnerList = [...this.winnerList];
      }
      if (type === 2) {
        this.beginLoading = 0;
      }
      if (type === 2 && this.pageType === 1) {
        this.playMusic(0);
      }
      if (type === 5) {
        this.playMusic(1);
        this.$refs.statisticRefs.init();
      }
      if (type === 1) {
        this.pauseMusic();
      }
      if (type === 1 && this.pageType === 5) {
        this.$refs.statisticRefs.clear();
      }
      this.pageType = type;
    },
    // 中奖名单排序
    winnerSort() {
      this.sortWinnerList.sort((a, b) => {
        return a - b;
      });
    },
    // 播放音频
    playMusic(type = 0) {
      this.pauseMusic();
      if (type === 1) {
        this.$refs.audioVotePlayer.currentTime = 0;
        this.$refs.audioVotePlayer.volume = 0.3;
        this.$refs.audioVotePlayer.play();
      } else {
        this.$refs.audioLotteryPlayer.currentTime = 0;
        this.$refs.audioLotteryPlayer.play();
      }
    },
    pauseMusic() {
      this.$refs.audioLotteryPlayer.pause();
      this.$refs.audioVotePlayer.pause();
    },
    // 生成*到***之间的随机整数
    random(max = 200, min = 1) {
      let randomInt = Math.floor(Math.random() * (max - min + 1)) + min;
      return randomInt;
    },
    // 键盘事件监听
    keydowns() {
      document.addEventListener("keyup", (e) => {
        if (e.type !== "keyup") return;
        debounces(() => {
          if (e.key === "Enter") {
            switch (this.pageType) {
              case 1:
                this.onPageType(2);
                break;
              case 2:
                this.onStart();
                break;
            }
          }
          if (e.key === "Escape") {
            if (this.beginLoading === 1) return;
            switch (this.pageType) {
              case 2:
                this.onPageType(1);
                break;
              case 4:
                this.onPageType(2);
                break;
              case 5:
                this.onPageType(1);
                break;
            }
          }
        }, 200);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.number-ball-box {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.btn {
  border-radius: 40px;
  padding: 0px 20px;
  background: gold;
  font-size: 26px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  &.main {
    width: 150px;
  }
  &:hover {
    background: rgba(gold, 0.8);
  }
  &:active {
    background: gold;
  }
  &.disabled {
    background: #999;
    &:active {
      background: #999;
    }
    &:hover {
      background: #999;
    }
  }
}
.main-box {
  width: 100vw;
  height: 100vh;
  background: url("../../assets/number-ball-image/bg.jpg") center center
    no-repeat;
  background-size: 100% 100%;
  z-index: 1;
  position: relative;
  .lottery-btn {
    position: absolute;
    right: 0px;
    bottom: 0px;
    height: 200px;
    width: 100%;
    padding-right: 80px;
    padding-bottom: 0px;
    & > div {
      transform: translateY(200px);
      transition: 0.3s;
    }
    .btn {
      width: 130px;
    }
    .vote {
      margin-left: 30px;
      color: gold;
      cursor: pointer;
      font-size: 16px;
    }
    &:hover {
      .btn,
      .vote {
        transform: translateY(0px);
      }
    }
  }
}
.lottery-box,
.vote-box {
  height: 100vh;
  width: 100%;
  transition: 0.6s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  transform: translateY(100vh);
  &.active {
    transform: translateY(0);
  }
}
.bg-video {
  font-size: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  background-size: 100% 100%;
  background-color: #ff3333;
}
.lotterying {
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100vh;
  .ele-list {
    margin-top: 40vh;
    transform: translateY(-50%);
    // width: 1400px;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    padding: 0 50px;
    .ele-bg {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      .ele-bg-border {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        background: rgba(0, 0, 0, 0.1);
        border: 6px solid rgba(247, 235, 193, 0.1);
      }
      img {
        position: absolute;
        width: 80px;
        height: 80px;
      }
      img:nth-child(1) {
        left: 0px;
        top: 0px;
      }
      img:nth-child(2) {
        right: 0px;
        top: 0px;
        transform: rotate(90deg);
      }
      img:nth-child(3) {
        left: 0px;
        bottom: 0px;
        transform: rotate(270deg);
      }
      img:nth-child(4) {
        right: 0px;
        bottom: 0px;
        transform: rotate(180deg);
      }
    }
    .ele-item {
      position: relative;
      flex: 0 0 auto;
      width: 200px;
      height: 200px;
      margin: 70px 40px;
      box-sizing: border-box;
      // background: rgba(0, 0, 0, 0.5);
      background: rgba(241, 207, 108, 0.7);
      border-radius: 50%;
      img {
        position: absolute;
        width: 110%;
        height: 110%;
        animation: turn 6s linear infinite;
      }
      .value {
        font-size: 60px;
      }
    }
  }
}
.bottom-btn-box {
  padding: 0 80px;
  position: absolute;
  right: 0px;
  bottom: 30px;
  width: 100%;
  align-items: end;
  .left {
    .pick {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #fff;
      .pick-box {
        line-height: 30px;
        border-radius: 5px;
        padding: 4px 10px;
        i {
          font-size: 18px;
          font-weight: 700;
          padding: 3px;
          background: gold;
          border-radius: 5px;
          cursor: pointer;
          &.disabled {
            background: #ccc;
          }
        }
        .num {
          font-size: 26px;
          font-weight: 700;
          padding: 0 10px;
          text-align: center;
        }
      }
    }
  }
  .right {
    text-align: center;
    color: gold;
    .bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .points {
      cursor: pointer;
    }
    .back {
      font-size: 16px;
      margin-left: 100px;
      color: #fff;
      cursor: pointer;
    }
  }
  .center-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 100px;
  }
  .left,
  .right {
    width: 400px;
    height: 100px;
  }
}
// 中奖名单
.win-list {
  margin: 0 auto;
  padding: 80px 0 0px;
  .title {
    padding: 10px 50px;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    background: rgba(rgb(252, 227, 88), 0.8);
    border-radius: 5px;
  }
  .win-list-tips {
    padding: 20px 0;
    text-align: center;
    color: #ccc;
    font-size: 14px;
  }
  .user-list {
    width: 800px;
    height: 700px;
    overflow: auto;
    background: rgba(rgb(252, 227, 88), 0.8);
    border-radius: 10px;
    padding-left: 20px;
    padding-top: 20px;
    position: relative;
    .el-icon-sort {
      color: #fff;
      font-size: 20px;
      position: absolute;
      right: 5px;
      top: 5px;
      cursor: pointer;
      &:active {
        color: #ccc;
      }
    }
    // 设置滚动条样式
    &::-webkit-scrollbar {
      width: 7px;
      height: 7px;
    }
    &::-webkit-scrollbar-track {
      background: rgb(248, 191, 33);
      border-radius: 2px;
    }
    &::-webkit-scrollbar-thumb {
      background: #f77b7b;
      border-radius: 7px;
    }
    &::-webkit-scrollbar-thumb:hover {
      background: rgb(248, 53, 53);
    }
    &::-webkit-scrollbar-corner {
      background: rgb(250, 54, 54);
    }
    .scroll {
      flex-flow: row wrap;
      width: 100%;
      .value {
        background: rgba(241, 24, 24, 0.6);
        width: 67px;
        height: 67px;
        line-height: 67px;
        border-radius: 50%;
        color: #fff;
        font-size: 26px;
        margin-right: 10px;
        margin-bottom: 10px;
        text-align: center;
        font-family: "Microsoft Yahei", "Hiragino Sans GB", "STHeiti",
          "Helvetica Neue", "Helvetica", "SimSun", "Tahoma", "Arial", sans-serif;

        color: rgb(255, 248, 184);
        letter-spacing: 2px;
        text-shadow: rgb(255, 166, 1) 3px 2px 5px;
      }
    }
  }
  .back {
    position: absolute;
    bottom: 80px;
    margin: 0px auto;
  }
}
// 中奖名单-end

.mask {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
}
@keyframes turn {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
.font-style {
  text-align: center;
  font: 14px/1.5 "Microsoft Yahei", "Hiragino Sans GB", "STHeiti",
    "Helvetica Neue", "Helvetica", "SimSun", "Tahoma", "Arial", sans-serif;

  color: rgb(255, 248, 184);
  letter-spacing: 2px;
  text-shadow: rgb(255, 129, 1) 0px 1px, rgb(255, 129, 1) 0px 2px,
    rgb(255, 129, 1) 0px 3px, rgb(255, 129, 1) 0px 5px,
    rgba(255, 0, 0, 0.65) 0px 10px 10px, rgba(255, 0, 0, 0.65) 0px 0px 10px,
    rgba(255, 0, 0, 0.65) 0px 0px 15px, rgba(255, 0, 0, 0.65) 0px 0px 20px;
}
</style>
